import { useState, useEffect } from 'react';

/**
 * 自定义Hook: useWindowSize
 * 
 * 这个Hook用于获取并监听浏览器窗口大小的变化
 * 
 * @returns {Object} - 返回包含窗口宽度和高度的对象 {width, height}
 * 
 * 使用示例:
 * const { width, height } = useWindowSize();
 * // 现在可以根据窗口大小做出响应式调整
 * // 例如: if (width < 768) { // 在小屏幕上执行某些操作 }
 */
function useWindowSize() {
  // 初始化状态为undefined，这样服务器端渲染时不会出错
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    // 定义处理窗口大小变化的函数
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    // 添加事件监听器
    window.addEventListener('resize', handleResize);
    
    // 立即调用一次处理函数，设置初始大小
    handleResize();
    
    // 清理函数：移除事件监听器
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组意味着这个effect只在组件挂载和卸载时运行

  return windowSize;
}

export default useWindowSize;